<template lang="">
    <div class="ChanNel">
        
      <div class="channel-wrap">
        <!-- cell：显示标题 -->
        <van-cell title="我的频道">
          <!-- 如果是默认插槽，直接写到双标签里面即可 -->
          <van-button @click="isEdit = !isEdit" style="width: 50px" type="danger" plain size="mini"
            >{{isEdit? '取消':'编辑'}}</van-button
          >
        </van-cell>
        <!-- 宫格 -->
        <van-grid>
           <van-grid-item v-for="(item, index) in ChannelArray" :key="index" >
           <span  @click="changeCurrent(index)" :class="{active:index == value}">
             {{ item.name }}</span>
             <van-icon @click="delChannels(index,item)" v-if="isEdit &&index " class="del-icon" name="cross"/>
        </van-grid-item>
        </van-grid>
      </div>

      <!-- 可选区域 -->
      <div class="channel-wrap">
        <!-- cell：显示标题 -->
        <van-cell title="可选频道" />

        <!-- 宫格 -->
        <van-grid>
          <van-grid-item @click="addChannels(item)" v-for="(item, index) in optionalChannel" :key="item.id" :text="item.name" />
        </van-grid>
      </div>
   
    
    </div>
</template>
<script>
import {addChannelsAPI, delChannelsAPI} from '@/api'
import {saveChannels} from '@/utils/storage'

export default {
    props:{
        ChannelArray:{
          required:true,
          type:Array
        },
         allChannels: {
      required: true,
      type: Array,
    },
          value: {
     required: true,
    type: Number
    },

    },
    data() {
        return {
            Channelshow:false,
            isEdit:false,
            
        }
    },
    methods: {

    // 我的频道点击事件
    changeCurrent(index) {
      // 把被点的span的下标传递给父
      this.$emit('input', index)
      // 再派发一个事件
      this.$emit('close')
    },
    async addChannels(item){
      this.ChannelArray.push(item)
      if(this.$store.state.tokenObj.token){
        let res = await addChannelsAPI([
          {
          id:item.id,
          seq:this.ChannelArray.length
         },
        ])
        // console.log(res);
       
        
      } else {

        // 就存到本地存储
        saveChannels( this.ChannelArray )

      }
    },
    async delChannels(index,item){
      this.ChannelArray.splice(index,1)
      if(index<this.value){
        this.$emit("input",this.value -1)
      };
        if(this.$store.state.tokenObj.token){
        let res = await delChannelsAPI(item.id)
        // console.log(res);
        
        
      } else {

        // 就存到本地存储
        saveChannels( this.ChannelArray )
        
      }
    }

  },
  computed:{
    optionalChannel(){
      return this.allChannels.filter(
        (value)=> this.ChannelArray.findIndex((v)=>v.id == value.id) == -1
      )
    }
  }
}
</script>
<style lang="less">
    .ChanNel{
        
      .channel-wrap{
          margin-top: 20px;
          .van-grid{
            .active {
              color:red;
            }
            span{
              font-size: 14px;
              
            }
          }
      }
      .del-icon{
        position: absolute;
        top: 5px;
        right: 5px;
      }

    }
</style>